<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont icon-back"></span>
    </div>
    <div class="header-center">
      <span class="iconfont icon-search"></span>
      输入城市/景点/游玩主题
    </div>
    <router-link tag="div" to="/city" class="header-right">
      <span>{{currentCity}}</span>
      <span class="iconfont icon-arrow-down-filling"></span>
    </router-link>
  </div>
</template>

<script scoped>
import { mapState } from 'vuex'
export default {
  name: 'Header',
  data () {
    return {}
  },
  computed: {
    ...mapState(['currentCity'])
  }
}
</script>

<style lang='less' scoped>
  .header{
    .flex();
    align-items: center;
    height: @headerHeight;
    line-height: @headerHeight;
    background-color: @bgColor;
    text-align: center;
    color:#fff;
    .header-left{
      width: 0.64rem;
      .icon-back{
        font-size:.4rem;
      }
    }
    .header-center{
      flex:1;
      .flex();
      align-items: center;
      justify-content: center;
      height: 0.64rem;
      border-radius:.1rem ;
      background-color: #fff;
      font-size:.3rem;
      color:rgb(246, 222, 222);
      .icon-search{
        margin-right: 0.2rem;
        font-size:.3rem;
      }
    }
    .header-right{
      min-width: 1.04rem;
      padding:0 .1rem;
      .icon-arrow-down-filling{
        font-size:.24rem;
      }
    }
  }
</style>
